javascript
youtube
Learn the fundamentals of shaders, with zero prior experience required. Starting from the basics of how the GPU renders pixels, you'll progress to building an animated, fractal heart effect written entirely from scratch. Designed specifically for creative developers who want to break into WebGL and master the math of motion.
Course developed by @pattvira
⭐️ Connect with Patt Vira ⭐️
🔗 Website:
🔗 Twitter:
🔗 Instagram:
⭐️ Code ⭐️
Part 1:
Part 2:
Part 3:
Part 4:
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning:
⭐️ Chapters ⭐️
- 0:00:00 Intro
- 0:00:51 Part 1 - Basic Introduction to Shaders
- 0:01:17 What is a shader?
- 0:03:24 Bridge between CPU and GPU
- 0:04:20 Vertex and fragment shaders
- 0:06:09 Start coding in p5.js
- 0:09:44 GLSL Rulebook
- 0:12:50 Set up canvas space in a vertex shader
- 0:16:16 Color pixels in a fragment shader
- 0:17:44 Map clip space to screen coordinates
- 0:20:03 Create a static gradient
- 0:22:04 Create a dynamic gradient
- 0:27:03 Part 2 - Domain Repetition
- 0:28:33 Draw a circle
- 0:32:05 Use gl_FragCoord to get pixel coordinates
- 0:38:45 Create tiling with fract()
- 0:42:00 Fix aspect ratio
- 0:43:56 Introduce the standard resolution fix
- 0:45:01 Part 3 - Shaping Functions
- 0:45:38 What is a shaping function?
- 0:46:20 Explore sin() function
- 0:47:41 Explore step() function
- 0:48:25 Explore smoothstep() function
- 0:49:40 Explore abs() function
- 0:5
|
2026/07/15
youtube
![Deep Learning Full Course 2026 [FREE] | Deep Learning Tutorial | Deep Learning Course | Simplilearn](https://i.ytimg.com/vi/EkcmIDsqmT8/sddefault_live.jpg)
